import { useCallback, useState, useEffect } from 'react';
import { Upload, Image } from '@douyinfe/semi-ui';
import { UPLOAD_CONFIG } from './constants';
import styles from './uploadComponent.module.scss';
import { ICON_PATHS } from '../../../../assets/images/constants';

/**
 * 可复用的上传组件
 * @param {Object} props
 * @param {string} props.title - 上传标题
 * @param {string} props.uploadKey - 上传键值
 * @param {string} props.subtitle - 副标题
 * @param {string} props.currentMenuKey - 当前菜单键
 * @param {Function} props.onUpload - 上传处理函数
 * @param {Function} props.onHistoryClick - 历史文件点击处理
 * @param {Object} props.referImagesList - 图片对象
 */
function UploadComponent({
  title,
  uploadKey,
  subtitle = '参考图',
  currentMenuKey,
  onUpload,
  onHistoryClick,
  referImagesList = [],
  onDeleteImage = () => {},
  imageContent = {}
}) {
  // const [currentContent, setCurrentContent] = useState(imageContent);
  const handleCustomRequest = useCallback(
    ({ file }) => {
      onUpload({ file, uploadKey });
    },
    [onUpload, uploadKey]
  );

  const handleHistoryClick = useCallback(
    e => {
      console.log(e);

      onHistoryClick(e);
      e.stopPropagation();
    },
    [onHistoryClick]
  );

  const handleTextClick = useCallback((e, bool) => {
    if (e.target.title === '参考图') {
      return;
    }
    if (e.target.tagName !== 'SPAN') {
      e.stopPropagation();
    }
  }, []);

  const handleImageClick = useCallback((e, bool) => {
    if (e.target.title === '参考图') {
      return;
    }
    if (e.target.tagName !== 'SPAN') {
      e.stopPropagation();
    }
  }, []);

  const imageKey = `${currentMenuKey}_${uploadKey}`;
  // 检查是否有图片referImagesList 结构set [{}]

  const referImageUrl = Array.from(referImagesList || []).find(
    item => item.key === imageKey
  )?.imageUrl;
  const uploadClassName = `${styles.uploadSection} ${
    currentMenuKey === 'multi' ? styles.uploadMultiSize : styles.uploadFullSize
  }`;

  const deleteImage = useCallback(() => {
    onDeleteImage?.(imageKey);
  }, [onDeleteImage, imageKey]);

  const renderResultsImgItem = useCallback(
    () => (
      <div className={styles.resultsImgItem}>
        <div className={styles.maskLayer}>
          <div
            className={styles.maskTool}
            onClick={e => handleTextClick(e, !['FZ', 'LZ'].includes(uploadKey))}>
            <Image
              className={styles.maskLayerImg}
              imgCls={`image-pointer-event`}
              src={ICON_PATHS.HISTORY_ICON}
              preview={false}
              draggable={false}
              title="历史文件"
              onClick={handleHistoryClick}
            />
            <Image
              className={styles.maskLayerImg}
              src={ICON_PATHS.UPLOAD_ICON}
              imgCls={`image-pointer-event`}
              preview={false}
              draggable={false}
              title="参考图"
              onClick={e => handleImageClick(e, !['FZ', 'LZ'].includes(uploadKey))}
            />
            <Image
              className={styles.maskLayerImg}
              imgCls={`image-pointer-event`}
              src={ICON_PATHS.DELETE_ICON}
              preview={false}
              draggable={false}
              alt="删除"
              title="删除"
              onClick={deleteImage}
            />
          </div>
          <div
            className={styles.maskEdit}
            onClick={e => handleTextClick(e, !['FZ', 'LZ'].includes(uploadKey))}>
            <div className={styles.maskleft}>
              <Image
                className={styles.maskLayerImg}
                src={ICON_PATHS.REFER_ICON}
                preview={false}
                draggable={false}
              />
              {!['FZ', 'LZ'].includes(uploadKey) ? (
                <div>参考{imageContent?.referType === 'subject' ? '主体' : '背景'}</div>
              ) : (
                <div>{uploadKey === 'FZ' ? '首帧' : '尾帧'}</div>
              )}
            </div>
          </div>
        </div>
        {referImageUrl && (
          <Image className={styles.img} src={referImageUrl} preview={false} draggable={false} />
        )}
      </div>
    ),
    [imageContent, referImageUrl]
  );

  return (
    <Upload {...UPLOAD_CONFIG} className={uploadClassName} customRequest={handleCustomRequest}>
      {referImageUrl ? (
        // <Image
        //   style={{ width: "100%", height: "100%" }}
        //   src={referImageUrl }
        //   preview={false}
        //   draggable={false}
        // />
        renderResultsImgItem()
      ) : (
        <div className={styles.uploadPlaceholder}>
          <div className={styles.uploadText} onClick={handleTextClick}>
            <span style={{ display: 'flex', alignItems: 'center' }}>
              <Image
                style={{ width: 14, height: 14, marginRight: 4 }}
                src={ICON_PATHS.IMAGE_ICON}
                preview={false}
                draggable={false}
              />
              {title}
            </span>
            {subtitle && subtitle}
          </div>
          <div className={styles.uploadText}>
            从<span onClick={handleHistoryClick}>「历史文件」</span>上传
          </div>
        </div>
      )}
    </Upload>
  );
}

export default UploadComponent;
